<template>
	<div class="custom-select-container">
		<el-input
			v-model="configs.val"
			:placeholder="config.placeholder"
			:suffix-icon="openCustom ? 'ArrowUp' : 'ArrowDown'"
			readonly
			@click="deptogglePanel($event)"
		>
		</el-input>
		<transition name="slide-fade">
			<div v-show="openCustom" class="custom-div">
				<slot></slot>
			</div>
		</transition>
	</div>
</template>

<script setup name="CustomSelect" lang="ts">
import { ref } from 'vue';
const props = withDefaults(
	defineProps<{
		config: anyObj;
	}>(),
	{
		config: () => {
			return { val: '' };
		},
	}
);
const configs = props.config;

// 是否显示自定义下拉
const openCustom = ref(false);

function deptogglePanel(event: any) {
	event || (event = window.event);
	event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);
	openCustom.value ? hideCustom() : showCustom();
}
function showCustom() {
	openCustom.value = true;
}
function hideCustom() {
	openCustom.value = false;
}
defineExpose({
	hideCustom,
});
</script>

<style lang="scss">
.custom-select-container {
	position: relative;
	display: inline-block;

	.custom-div {
		position: absolute;
		top: 40px;
		left: -1px;
		z-index: 1000;
		overflow: auto;
		max-height: 350px;
		width: 500px;
		// padding: 6px;
		border: solid 1px var(--el-color-primary);
		border-radius: 4px;
		// background-color: #ffffff;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}

	.el-input__inner {
		cursor: pointer;
	}

	/* 过渡 */
	.slide-fade-enter-active {
		transition: all 0.5s ease;
	}
	.slide-fade-leave-active {
		transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
	}
	.slide-fade-enter,
	.slide-fade-leave-to {
		transform: translateY(-10px);
		opacity: 0;
	}
}
</style>
